<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加学生信息</title>
    <style>
        * {
            outline: none;
        }

        table {
            width: 570px;
            height: 400px;
            border: 1px solid #cccccc;
            padding: 10px;
            margin: 80px auto 0px;
            background: rgba(255, 255, 255, 0.8);
        }

        span {
            font-size: 12px;
        }

        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .orange {
            color: orange
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td style="width: 80px;">学号：</td>
            <td>
                <input type="text" id="studentNo" name="StudentNo">
                <span id="studentNoMsg"></span>
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" id="loginPwd1" name="LoginPwd">
                <span id="loginPwd1Msg"></span>
            </td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password" id="loginPwd2" name="loginPwd2">
                <span id="loginPwd2Msg"></span>
            </td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td>
                <input type="text" id="studentName" name="StudentName">
                <span id="studentNameMsg"></span>
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" value="M" name="Sex" checked>男
                <input type="radio" value="F" name="Sex">女
            </td>
        </tr>
        <tr>
            <td>年级：</td>
            <td>
                <select id="grade" name="GradeId" style="width: 170px;">
                    <option value="0">--请选择--</option>
                    <option value="1">一年级</option>
                    <option value="2">二年级</option>
                    <option value="3">三年级</option>
                </select>
                <span id="gradeMsg"></span>
            </td>
        </tr>
        <tr>
            <td>电话：</td>
            <td>
                <input type="text" id="phone" name="Phone">
                <span id="phoneMsg"></span>
            </td>
        </tr>
        <tr>
            <td>地址：</td>
            <td>
                <textarea rows="5" cols="50" id="address" name="Address"></textarea>
            </td>
        </tr>
        <tr>
            <td>生日：</td>
            <td>
                <input type="text" id="bornDate" name="BornDate">
                <span id="bornDateMsg"></span>
            </td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td>
                <input type="text" id="email" name="Email">
                <span id="emailMsg"></span>
            </td>
        </tr>
        <tr>
            <td>身份证：</td>
            <td>
                <input type="text" id="identityCard" name="IdentityCard">
                <span id="identityCardMsg"></span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button type="submit" id="tj">提交</button>
                <button type="reset" id="cz">重置</button>
            </td>
        </tr>
    </table>
    <script src="../bing.js"></script>
    <script>
        let formIsOk = false  //该变量，用于控制表单是否可以提交
        //获取表单对象
        let form = document.querySelector("form")

        //获得焦点方法
        let focus = function (obj, msg, fnCheck) {
            if (!fnCheck()) {
                obj.className = "orange"
                obj.innerText = msg
            }
        }
        //失去焦点方法
        let blur = function (obj, isok, msg) {
            if (isok) {
                obj.className = "green"
            } else {
                obj.className = "red"
            }
            obj.innerText = msg
        }

        //学号
        let studentNo = document.querySelector("#studentNo")
        //学号描述
        let studentNoMsg = document.querySelector("#studentNoMsg")
        //验证学号的正则表达式
        let studentNoReg = /^KW35_\d{4}$/
        //学号文本框 获得焦点事件
        studentNo.onfocus = function () {
            focus(studentNoMsg, '请以KW35_开头，后面是4位数字', studentNoCheck);
        }
        //学号文本框 输入内容事件
        studentNo.oninput = function () {
            focus(studentNoMsg, '请以KW35_开头，后面是4位数字', studentNoCheck);
        }
        //学号失去焦点
        studentNo.onblur = function () {
            studentNoCheck()   //验证学号
        }
        //验证学号的方法
        let studentNoCheck = function () {
            let val = studentNo.value   //获取学号
            //格式验证
            if (studentNoReg.test(val)) {
                //ajax验证学号是否重复
                let xhr1 = new XMLHttpRequest()
                xhr1.open('GET', 'http://119.45.221.185:81/Student/GetStudentByNo?studentNo=' + val)
                xhr1.send()
                xhr1.onreadystatechange = function () {
                    if (xhr1.readyState === 4) {
                        if (xhr1.status >= 200 && xhr1.status < 400) {
                            //返回一个学生对象
                            let stu = JSON.parse(xhr1.response)
                            console.log(stu);
                            if (stu) {
                                blur(studentNoMsg, false, '学号已存在')
                                return false
                            } else {
                                blur(studentNoMsg, true, '学号正确')
                                return true
                            }
                        }
                    }
                }
            } else {
                blur(studentNoMsg, false, '学号格式错误')
                return false
            }
        }

        //密码
        let loginPwd1 = document.querySelector("#loginPwd1")
        //密码描述
        let loginPwd1Msg = document.querySelector("#loginPwd1Msg")
        //验证密码的正则表达式
        let loginPwd1Reg = /^\w{6,16}$/
        //密码获得焦点
        loginPwd1.onfocus = function () {
            focus(loginPwd1Msg, '只能包含(字母、数字、下划线)长度为6到16位的字符', loginPwd1Check)
        }
        loginPwd1.oninput = function () {
            focus(loginPwd1Msg, '只能包含(字母、数字、下划线)长度为6到16位的字符', loginPwd1Check)
        }
        //密码失去焦点
        loginPwd1.onblur = function () {
            loginPwd1Check();  //验证密码
        }
        //验证密码的方法
        let loginPwd1Check = function () {
            let val = loginPwd1.value  //获取密码
            if (loginPwd1Reg.test(val)) {
                blur(loginPwd1Msg, true, '密码正确')
                return true
            } else {
                blur(loginPwd1Msg, false, '密码格式错误')
                return false
            }
        }

        //确认密码
        let loginPwd2 = document.querySelector("#loginPwd2")
        //确认密码描述
        let loginPwd2Msg = document.querySelector("#loginPwd2Msg")
        //确认密码获得焦点
        loginPwd2.onfocus = function () {
            focus(loginPwd2Msg, '确认密码必须跟密码相同', loginPwd2Check)
        }
        loginPwd2.oninput = function () {
            focus(loginPwd2Msg, '确认密码必须跟密码相同', loginPwd2Check)
        }
        //确认密码失去焦点
        loginPwd2.onblur = function () {
            loginPwd2Check()  //验证确认密码
        }
        //验证确认密码的方法
        let loginPwd2Check = function () {
            let val1 = loginPwd1.value  //获取密码
            let val2 = loginPwd2.value  //获取确认密码
            if (val1 === val2 && val2 !== "") {
                blur(loginPwd2Msg, true, '确认密码正确')
                return true
            } else {
                blur(loginPwd2Msg, false, '确认密码错误')
                return false
            }
        }

        //姓名
        let studentName = document.querySelector("#studentName")
        //姓名描述
        let studentNameMsg = document.querySelector("#studentNameMsg")
        //验证姓名的正则表达式
        let studentNameReg = /^[\u4e00-\u9fa5]{2,6}$/
        //姓名获得焦点
        studentName.onfocus = function () {
            focus(studentNameMsg, '必须是2到6位中文汉字', studentNameCheck)
        }
        studentName.oninput = function () {
            focus(studentNameMsg, '必须是2到6位中文汉字', studentNameCheck)
        }
        //姓名失去焦点
        studentName.onblur = function () {
            studentNameCheck()   //验证姓名
        }
        //验证姓名的方法
        let studentNameCheck = function () {
            let val = studentName.value  //获取姓名
            if (studentNameReg.test(val)) {
                blur(studentNameMsg, true, '姓名正确')
                return true
            } else {
                blur(studentNameMsg, false, '姓名格式错误')
                return false
            }
        }

        //年级
        let grade = document.querySelector("#grade")
        //年级描述
        let gradeMsg = document.querySelector("#gradeMsg")
        //年级获得焦点
        grade.onfocus = function () {
            focus(gradeMsg, '请选择年级', gradeCheck)
        }
        //年级内容改变后触发
        grade.onchange = function () {
            gradeCheck()   //验证年级
        }
        //验证年级的方法
        let gradeCheck = function () {
            let val = grade.value  //获取年级
            if (val !== "0") {
                blur(gradeMsg, true, '年级正确')
                return true
            } else {
                blur(gradeMsg, false, '请选择年级')
                return false
            }
        }

        //电话
        let phone = document.querySelector("#phone")
        //电话描述
        let phoneMsg = document.querySelector("#phoneMsg")
        //验证电话的正则表达式
        let phoneReg = /^1[3-9]\d{9}$/
        //电话获得焦点
        phone.onfocus = function () {
            focus(phoneMsg, '必须是11位手机号码', phoneCheck)
        }
        phone.oninput = function () {
            focus(phoneMsg, '必须是11位手机号码', phoneCheck)
        }
        //电话失去焦点
        phone.onblur = function () {
            phoneCheck()  //验证电话
        }
        //验证电话的方法
        let phoneCheck = function () {
            let val = phone.value  //获取电话
            if (phoneReg.test(val)) {
                blur(phoneMsg, true, '电话号码正确')
                return true
            } else {
                blur(phoneMsg, false, '电话号码格式错误')
                return false
            }
        }

        //生日
        let bornDate = document.querySelector("#bornDate")
        //生日描述
        let bornDateMsg = document.querySelector("#bornDateMsg")
        //验证生日的正则表达式
        let bornDateReg = /^\d{4}-\d{1,2}-\d{1,2}$/
        //生日获得焦点
        bornDate.onfocus = function () {
            focus(bornDateMsg, '必须是日期格式：xxxx-xx-xx', bornDateCheck)
        }
        bornDate.oninput = function () {
            focus(bornDateMsg, '必须是日期格式：xxxx-xx-xx', bornDateCheck)
        }
        //生日失去焦点
        bornDate.onblur = function () {
            bornDateCheck()  //验证生日
        }
        //验证生日的方法
        let bornDateCheck = function () {
            let val = bornDate.value  //获取生日
            if (bornDateReg.test(val)) {
                blur(bornDateMsg, true, '生日正确')
                return true
            } else {
                blur(bornDateMsg, false, '生日格式错误')
                return false
            }
        }


        //邮箱
        let email = document.querySelector("#email")
        //邮箱描述
        let emailMsg = document.querySelector("#emailMsg")
        //验证邮箱的正则表达式
        let emailReg = /^\w+@\w+(\.\w+){1,2}$/
        //邮箱获得焦点
        email.onfocus = function () {
            focus(emailMsg, '请填写正确的邮箱格式', emailCheck)
        }
        email.oninput = function () {
            focus(emailMsg, '请填写正确的邮箱格式', emailCheck)
        }
        //邮箱失去焦点
        email.onblur = function () {
            emailCheck()  //验证邮箱
        }
        //验证邮箱的方法
        let emailCheck = function () {
            let val = email.value  //获取邮箱
            if (emailReg.test(val)) {
                blur(emailMsg, true, '邮箱正确')
                return true
            } else {
                blur(emailMsg, false, '邮箱格式错误')
                return false
            }
        }

        //身份证
        let identityCard = document.querySelector("#identityCard")
        //身份证描述
        let identityCardMsg = document.querySelector("#identityCardMsg")
        //验证身份证的正则表达式
        let identityCardReg = /^\d{17}[0-9Xx]$/
        //身份证获得焦点
        identityCard.onfocus = function () {
            focus(identityCardMsg, '请填写正确的身份证号码', identityCardCheck)
        }
        identityCard.oninput = function () {
            focus(identityCardMsg, '请填写正确的身份证号码', identityCardCheck)
        }
        //身份证失去焦点
        identityCard.onblur = function () {
            identityCardCheck()  //验证身份证
        }
        //验证身份证的方法
        let identityCardCheck = function () {
            let val = identityCard.value  //获取身份证
            if (identityCardReg.test(val)) {
                blur(identityCardMsg, true, '身份证号码正确')
                return true
            } else {
                blur(identityCardMsg, false, '身份证号码格式错误')
                return false
            }
        }

        //添加和修改学生的方法
        function editStudent(url,type='添加') {
            //组织学生信息
            let sexs = document.getElementsByName("Sex")
            let sex = ''
            for (let i = 0; i < sexs.length; i++) {
                if (sexs[i].checked) {
                    sex = sexs[i].value
                    break;
                }
            }
            let obj = {
                StudentNo: studentNo.value,
                LoginPwd: loginPwd1.value,
                StudentName: studentName.value,
                Sex: sex,
                GradeId: grade.value,
                Phone: phone.value,
                Address: document.querySelector("#address").value,
                BornDate: bornDate.value,
                Email: email.value,
                IdentityCard: identityCard.value
            }
            let params = _b.parseObjToStr(obj)
            console.log(params);
            //01.创建ajax对象
            let xhr = new XMLHttpRequest()
            //02.初始化参数，这里是POST请求
            xhr.open('POST', url);
            //注意：POST请求，必须要设置下面的请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            //03.发送请求，注意：POST请求的参数要在send()方法里面传递
            xhr.send(params)
            //04.获取数据
            xhr.onreadystatechange = function () {
                //判断请求状态
                if (xhr.readyState === 4) {
                    //判断状态编码
                    if (xhr.status >= 200 && xhr.status < 400) {
                        if (JSON.parse(xhr.response)) {
                            alert(type+"成功！")
                            cz.click()   //调用重置按钮的点击方法
                            //调用父窗体里面的搜索按钮的click()方法
                            window.parent.document.getElementById("btnSearch").click()
                            //调用父窗体里面的#close对象的click()方法
                            window.parent.document.getElementById("close").click()
                        } else {
                            alert(type+"失败！")
                        }
                    }
                }
            }
        }

        //获取提交按钮
        let tj = document.querySelector("#tj")
        tj.onclick = function () {
            if(studentNo.disabled){
                editStudent('http://119.45.221.185:81/Student/Update','修改');
            }else{
                editStudent('http://119.45.221.185:81/Student/Add','添加');
            }
        }

        //获取重置按钮
        let cz = document.querySelector("#cz")
        cz.onclick = function () {
            //获取表单中的所有span
            let spans = document.querySelectorAll("table span")
            for (let i = 0; i < spans.length; i++) {
                spans[i].innerText = ''
            }
            //获取所有的input
            let inputs = document.querySelectorAll("table input")
            for (let i = 0; i < inputs.length; i++) {
                if(inputs[i].name!=="Sex"){
                    inputs[i].value = ''
                }
            }
        }

        //修改学生之前，先加载学生的方法
        var loadStudentByNo = function () {
            //根据学号，获取学生对象
            let xhr2 = new XMLHttpRequest()
            xhr2.open('GET', 'http://119.45.221.185:81/Student/GetStudentByNo?studentNo=' + studentNo.value)
            xhr2.send()
            xhr2.onreadystatechange = function () {
                if (xhr2.readyState === 4) {
                    if (xhr2.status >= 200 && xhr2.status < 400) {
                        //返回一个学生对象
                        let stu = JSON.parse(xhr2.response)
                        if (stu) {
                            loginPwd1.value = stu.LoginPwd
                            loginPwd2.value = stu.LoginPwd
                            studentName.value = stu.StudentName
                            let sexs = document.getElementsByName("Sex")
                            sexs[`${stu.Sex==='M'?0:1}`].checked = true
                            grade.value =  stu.GradeId
                            phone.value = stu.Phone
                            address.value = stu.Address
                            bornDate.value = stu.BornDate
                            email.value = stu.Email
                            identityCard.value = stu.IdentityCard
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>